<script lang="ts" setup name="login">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

import 'vant/es/toast/style'
import { showFailToast } from 'vant'
import { Checkbox } from 'vant'

const router = useRouter()
const username = ref('')
const password = ref('')
const remember = ref(false)
const isUsernameValid = ref(true)
const isPasswordValid = ref(true)

// 登录
const login = () => {
	if (!validateUsername() || !validatePassword()) {
		return
	}

	// 登录逻辑
	const params = {
		username: username.value,
		password: password.value,
		remember: remember.value,
	}
	
	// 这里可以添加登录成功后的处理逻辑
	showFailToast('登录成功')
	
	console.log('账号:', username.value)
	console.log('密码:', password.value)
	console.log('记住密码:', remember.value)
	
	// 登录成功后跳转到主页面
	router.push('/home')
}

const validateUsername = () => {
	const pattern = /^[a-zA-Z0-9]{6,16}$/
	isUsernameValid.value = pattern.test(username.value)
	return isUsernameValid.value
}
const validatePassword = () => {
	const pattern = /^[a-zA-Z0-9]{6,16}$/
	isPasswordValid.value = pattern.test(password.value)
	return isPasswordValid.value
}

const goRegister = () => {
  router.push('/register')
}

onMounted(() => {})
</script>
<template>
	<div class="login-container">
		<div class="login-content">
			<div class="login-header">
				<h1>欢迎使用</h1>
				<h2>医疗档案管理</h2>
			</div>
			<div class="login-icon">
				<!-- 可替换为实际图片路径 -->
				
			</div>
			<div class="login-box">
				<form @submit.prevent="login">
					<div class="form-group">
						<label for="username">账号</label>
						<input id="username" v-model="username" type="text" placeholder="请输入账号" />
						<span v-if="!isUsernameValid" class="error-message">账号格式不正确</span>
					</div>
					<div class="form-group">
						<label for="password">密码</label>
						<input id="password" v-model="password" type="password" placeholder="请输入密码" />
						<span v-if="!isPasswordValid" class="error-message">密码格式不正确</span>
					</div>
					<div class="form-group">
						<van-checkbox v-model="remember" class="remember-label">记住密码</van-checkbox>
					</div>
					<button type="submit">登录</button>
					<button type="button" class="register-btn" @click="goRegister">注册</button>
				</form>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.login-container {
	display: flex;
	justify-content: center;
	align-items: flex-start; // 从center改为flex-start
	height: 100vh;
	background: url('@/assets/images/your-medical-bg.jpg') no-repeat center center;
	background-size: cover;
	padding-top: 180px; // 新增：整体向上靠
}

.login-content {
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.login-header {
	text-align: center;
	margin-bottom: 28px; // 更大间距
	h1 {
		font-size: 2.6rem; // 更大
		font-weight: 700;
		margin-bottom: 10px;
		color: #222;
	}
	h2 {
		font-size: 1.6rem; // 更大
		font-weight: 500;
		color: #222;
		margin-bottom: 0;
	}
}

.login-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 28px; // 更大间距
	img {
		width: 140px; // 更大
		height: 140px;
		border-radius: 50%;
		background: #fff;
		object-fit: contain;
		box-shadow: 0 2px 8px rgba(0,0,0,0.06);
		padding: 22px;
	}
}

.login-box {
	width: 100%;
	background: #fff;
	border-radius: 16px; // 更大
	box-shadow: 0 2px 16px rgba(0,0,0,0.10); // 更明显
	padding: 40px 32px 32px 32px; // 更大内边距
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.form-group {
	margin-bottom: 28px; // 再加大间距
	display: flex;
	flex-direction: column;
}

label {
  color: #666;
  font-size: 28px; // 再加大
  margin-bottom: 14px;
}

input[type='text'],
input[type='password'] {
  width: 100%;
  padding: 28px 22px; // 再加大
  border: 2.5px solid #e0e0e0;
  border-radius: 12px;
  font-size: 28px; // 再加大
  color: #333;
  background: #f8f9fb;
  outline: none;
  margin-bottom: 0;
}

button[type='submit'] {
  width: 100%;
  padding: 28px;
  border: none;
  border-radius: 12px;
  background-color: #7b6ff2;
  color: #fff;
  font-size: 32px; // 再加大
  font-weight: 800;
  cursor: pointer;
  margin-top: 18px;
  transition: background 0.2s;
}
button[type='submit']:hover {
	background-color: #5a4edc;
}

.error-message {
  color: #ff4d4f;
  font-size: 22px; // 再加大
  margin-top: 8px;
}

.register-btn {
  width: 100%;
  padding: 22px;
  border: 3px solid #7b6ff2;
  border-radius: 12px;
  background-color: #fff;
  color: #7b6ff2;
  font-size: 28px; // 再加大
  font-weight: 800;
  cursor: pointer;
  margin-top: 24px;
  transition: background 0.2s, color 0.2s;
}
.register-btn:hover {
  background-color: #f3f0ff;
  color: #5a4edc;
}

// 调整van-checkbox字号和复选框尺寸
:deep(.van-checkbox__label) {
  font-size: 28px !important; // 再加大
}
:deep(.van-checkbox__icon) {
  font-size: 36px !important; // 再加大
  min-width: 36px !important;
  height: 36px !important;
}
</style>
